<template>
  <div style="position: relative;height:330px" :style="$store.getters.screenWidth ? 'height:490px': ''">
    <div style="height:40px;"></div>
    <div class="H2title" :class="isshow ? 'move' : ''" ref="pronbit">
      <h2 :style="$store.getters.screenWidth ? 'font-size:28px': ''">我们的优势</h2>
    </div>
    <div>
      <div style="font-size:16px;font-weight:300;" :style="$store.getters.screenWidth ? 'font-size:14px': ''">OUR SUPERIORITY</div>
      <div class="index_from_bottom" v-if="!$store.getters.screenWidth" :class="isshow ? 'movebottom' : ''">
        <div class="index_from_bottom_item" v-for="(item,index) in bottom_list" :key="index">
          <i style="font-size: 111px;color: #62a8ea;transition: all 1s ease 0s;font-size:121px"  class="el-icon-discover" :class="item.icon" ></i>
          <p style="font-size:18px;font-weight:300;margin-top:5px;transition: all 1s ease 0s;">{{item.name}}</p>
        </div>
      </div>
      <div class="index_from_bottom" v-else :class="isshow ? 'movebottom_phone' : ''">
        <div class="index_from_bottom_item" style="width:50%" v-for="(item,index) in bottom_list" :key="index">
          <i style="font-size: 111px;color: #62a8ea;transition: all 1s ease 0s;font-size:100px"  class="el-icon-discover" :class="item.icon" ></i>
          <p style="font-size:18px;font-weight:300;margin-top:5px;transition: all 1s ease 0s;">{{item.name}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CenterTitle",
  props: {
    msg: String
  },
  data() {
    return {
      isshow: true,
      bottom_list: [
        { name: "便携性" ,icon:"el-icon-pie-chart"},
        { name: "智能化" ,icon:"el-icon-discover"},
        { name: "易拓展",icon:"el-icon-medal-1"},
        { name: "模块化",icon:'el-icon-aim' }
      ]
    };
  },
  components: {},
  mounted() {
    window.addEventListener("scroll", this.handleScrollx, true);
  },
  methods: {
    handleScrollx() {
      let llheight = document.body.clientHeight; //视窗高度
      if (this.$refs.pronbit) {
        let topheight = this.$refs.pronbit.getBoundingClientRect().top;
        if (llheight - topheight > 20) {
          this.isshow = true;
        } else {
          this.isshow = false;
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.H2title {
  width: 100%;
  margin-top: 60px;
  position: absolute;
  top: -150px;
  
}
.H2title h2 {
  font-size: 36px;
  font-weight: 300;
}
.move {
  animation: rotatep 1s linear 0.2s;
  animation-fill-mode: forwards;
}

@keyframes rotatep {
  0% {
    top: -80px;
    opacity: 0;
  }
  100% {
    top: -40px;
    opacity: 1;
  }
}
@keyframes rotatebottom {
  0% {
    bottom: -100px;
    opacity: 0;
    visibility:hidden;
  }
  100% {
    bottom: 10px;
    opacity: 1;
    visibility:visible;
  }
}
.movebottom {
  animation: rotatebottom 1s linear 0.2s;
  animation-fill-mode: forwards;
}
.movebottom_phone {
  animation: rotatebottomPhone 1s linear 0.2s;
  animation-fill-mode: forwards;
}
@keyframes rotatebottomPhone {
  0% {
    bottom: -100px;
    opacity: 0;
    visibility:hidden;
  }
  100% {
    bottom: 50px;
    opacity: 1;
    visibility:visible;
  }
}
.index_from_bottom {
  position: absolute;
  bottom: -100px;
  visibility: hidden;
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-items: center;
  padding: 10px 20px 30px;
  background-color: #f8f8f8;
  .index_from_bottom_item {
    padding-top: 10px;
    &:hover .el-icon-discover{
      transform: rotateY(360deg);
    }
     &:hover p{
      transform: scale(1.1);
      color:#409eff ;
    }
  }
}
</style>
